<template>
    <div class="big-box">
        <div class="nav">
            <Nav></Nav>
        </div>
        <div class="background-video">
            <video src="../assets/视频/新闻背景视频.mp4" autoplay loop muted></video>
        </div>
        <div class="carousel-container">
            <div class="carousel">
                <div class="box">
                    <div class="item"><img src="../assets/img/新闻轮播图1.png"></div>
                    <div class="item"><img src="../assets/img/新闻轮播图2.png"></div>
                    <div class="item"><img src="../assets/img/新闻轮播图3.png"></div>
                </div>
            </div>
            <div class="carousel-buttons">
                <img src="../assets/img/左箭头.png" alt="上一张" @click="pre" class="arrow-left">
                <img src="../assets/img/右箭头.png" alt="下一张" @click="next" class="arrow-right">
            </div>
        </div>
        <img class="buy-btn" src="../assets/img/其他页面的预购.png" alt="预购" @click="showModal = true">
        <div v-if="showModal" class="modal-mask" @click="showModal = false">
            <div class="modal-content" @click.stop>
                <button class="close-btn" @click="showModal = false">X</button>
                <div class="buy">
                    <div class="buy-img">
                        <img v-if="selectedVersion === '数字标准版'" src="../assets/img/数字标准版.png" alt="数字标准版">
                        <img v-if="selectedVersion === '数字豪华版'" src="../assets/img/数字豪华版.png" alt="数字豪华版">
                    </div>
                    <div class="buy-choose">
                        <div class="platform">
                            <h1>选择平台</h1>
                            <div class="button-container">
                                <button v-for="platform in platforms" :key="platform"
                                    :class="{ active: selectedPlatform === platform }"
                                    @click="selectedPlatform = platform">
                                    {{ platform }}
                                </button>
                            </div>
                        </div>
                        <div class="version">
                            <h1>选择版本</h1>
                            <div class="button-container">
                                <button v-for="version in versions[selectedPlatform]" :key="version"
                                    :class="{ active: selectedVersion === version }" @click="selectVersion(version)">
                                    {{ version }}
                                </button>
                            </div>
                        </div>
                        <div class="buy-bottom"><img src="../assets/img/预购后红葫芦.png" alt="预购"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Nav from './Nav.vue';

export default {
    components: {
        Nav
    },
    data() {
        return {
            platforms: ['PC', 'PS5'],
            versions: {
                'PC': ['数字标准版', '数字豪华版'],
                'PS5': ['数字标准版', '数字豪华版'],
            },
            selectedPlatform: 'PC',
            selectedVersion: '数字标准版',
            showModal: false,
            i: 0,
            maxIndex: 3,
            intervalId: null,
        }
    },
    mounted() {
        this.intervalId = setInterval(this.next, 5000);
        document.querySelector('.carousel-container').addEventListener('mouseover', this.clearInterval);
        document.querySelector('.carousel-container').addEventListener('mouseout', this.setInterval);
    },
    beforeUnmount() {
        this.clearInterval();
        document.querySelector('.carousel-container').removeEventListener('mouseover', this.clearInterval);
        document.querySelector('.carousel-container').removeEventListener('mouseout', this.setInterval);
    },
    methods: {
        selectVersion(version) {
            this.selectedVersion = version;
        },
        updateSlide(index) {
            this.i = (index + this.maxIndex) % this.maxIndex;
            document.querySelector('.carousel').style.transform = `translateX(-${this.i * 100}%)`;
        },
        next() {
            this.updateSlide(this.i + 1);
        },
        pre() {
            this.updateSlide(this.i - 1);
        },
        clearInterval() {
            clearInterval(this.intervalId);
        },
        setInterval() {
            this.intervalId = setInterval(this.next, 5000);
        }
    }
}
</script>

<style scoped>
.big-box {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

.nav {
    flex: 0 0 auto;
}

.carousel-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    margin: auto;
    overflow: hidden;
    /* 确保只显示一个项目 */
}

.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    /* 添加过渡效果 */
}

.box {
    display: flex;
    width: 100%;
    height: 100%;
}

.item {
    min-width: 100%;
    /* 确保每个项目宽度为100% */
    height: 100%;
    box-sizing: border-box;
}

.item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-buttons {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
}

.arrow-left,
.arrow-right {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.background-video video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.buy-btn {
    width: 190px;
    height: 185px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    cursor: pointer;
}

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    width: 90%;
    height: 85%;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.buy {
    display: flex;
    flex-direction: row;
}

.buy-img {
    flex: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buy-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buy-choose {
    flex: 4;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.buy-choose button {
    background-color: #fff;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 30px;
    transition: background-color 0.3s;
    width: 250px;
    height: 100px;
    box-sizing: border-box;
    font-family: 'STKaiti', '华文楷体', '楷体', sans-serif;
}

.buy-choose button.active {
    background-color: rgb(233, 169, 73);
    color: #eaeaea;
}

.buy-choose h1 {
    font-family: 'STKaiti', '华文楷体', '楷体', sans-serif;
    font-size: 35px;
}

.buy-bottom {
    margin-top: 70px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.buy-bottom img {
    width: 100%;
    height: auto;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
</style>
